<template>
  <div id="app" class="bodyView info-detail-page" :class="[ispublishMain?'is-publish-sub-page':'']">
    <div class="ph-wrap">
      <a class="t-adv" v-if="showSysAdv" :href="sysAdvData.url" @click.prevent="toAdv">
        <img :src="sysAdvData.image" alt="">
        <a class="close-tadv" @click.prevent="handlRemoveAdv"></a>
        <span class="adv-txt">广告</span>
      </a>
      <Header ref="gHeader" @onShowLogin="showLogin" @onLoginOut="loginOut" />
    </div>
    <div class="layout-container">
      <!-- <LeftNav v-if="!isSingleInfo" /> -->
      <LeftNav/>
      <div class="content-box">
        <!-- <transition name="fade" mode="out-in"> -->
          <template>
            <keep-alive>
              <router-view ref="mainPage"  v-if="$route.meta.keepAlive"></router-view>
            </keep-alive>
          </template>
          <router-view ref="mainPage" v-if="!$route.meta.keepAlive"></router-view>
        <!-- </transition> -->

        <Fbar @scrollchange="toTop"/>

      </div>
      <a-modal :keyboard="false" v-model="showLoginView" destroyOnClose centered :mask-closable="false" :footer="null" :closable="false"  width="520px">
        <Login ref="gLogin" :tab="loginType" @close="closeLogin" @onLoginSucc="loginSucc" />
      </a-modal>
    </div>

    <a-modal v-model="showFeedBack" destroyOnClose centered :footer="null"  :closable="false" width="670px">
      <FeedBack ref="refFeedBack" targetid="" :targettype="0" @close="showFeedBack=false"/>
    </a-modal>
  </div>
</template>

<script>
import { mapState} from 'vuex'
import api from '@/api/api'
import Fbar from '@/components/FBar'
import FeedBack from '@/components/feedBack'
import Header from '@/components/Header'
import LeftNav from '@/components/LeftNav'
import Login from '@/components/Login.vue'
export default {
  name: 'app',
  components: {
    FeedBack,Fbar,
    Header,
    LeftNav,
    Login
  },
  watch: {
    $route(f, b) {
      this.checkIsInfoPage();
      // if (f.path != b.path) {
      //   this.changeBg()
      // }
    }
  },
  computed: {
      ...mapState(['theme']),
  },
  data() {
    return {
      showSysAdv:false,
      sysAdvData:{},
      ispublishMain:false,
      isHiddenSide:false,
      isAppMain:true,
      noLoginIsTak:true,
      showFeedBack: false,
      isSingleInfo: false,
      isALREADYCLOSERIGHTBAR: false,
      isShowRightBar: false,
      isDetail: false,
      isDarkTheme: false,
      showNewLogin: false,
      hasBg: true,
      showLoginView: false,
      showRegiste: false,
      hideView: false,
      loginType: 0
    }
  },
  async mounted() {
    let result=await api.getSysAdv();

    result.data=[{image:'http://image.gameuiux.cn/2025/01/21/1782cfea7f26c3daf60ec312d7e68a86.jpg',url:'https://nv9yzrinr2z.feishu.cn/share/base/form/shrcn9YkP2UO3zt2lIy4rv1vAif'}]
    if(!result.data||result.data.length==0){
      this.showSysAdv=false;
    }else{
      $('#app').addClass('b-has-adv');
      this.sysAdvData=result.data[0];
      this.showSysAdv=true;
    }

    if(localStorage.getItem('I-HD-SD')){
      this.isHiddenSide=localStorage.getItem('I-HD-SD');
    }
    else{
      this.isHiddenSide=true;
    }
    $('html').addClass(this.theme)
    this.checkIsInfoPage();
    this.changeBg()
    let that=this;
    let code = this.getUrlKey('code', window.location.href)
    let state = this.getUrlKey('state', window.location.href)
    let token = window.localStorage.getItem('token')
    if (code && state && !token) {
      if (state != 'game_bind_weixin' && state != 'game_bind_qq' && state != 'game_bind_weibo') {
        // this.showLoginView=true;
        let _type='';
        switch (state) {
          case 'game_wx':
            _type='weixin';
            localStorage.setItem('type', 'weixin')
            break
          case 'game_qq':
            _type='qq';
            localStorage.setItem('type', 'qq')
            break
          case 'game_weibo':
            _type='weibo';
            localStorage.setItem('type', 'weibo')
            break
        }

        let param={code:code,type:_type}
        let res = await api.thirdLogin(param);
        if (res.code == 0) {
            this.$amessage.success('登录成功，欢迎回来～');
            let member = res.data.member;
            localStorage.setItem('BSIC', encodeURIComponent(JSON.stringify(member)));
            window.localStorage.setItem('token', res.data.token);
            window.localStorage.setItem('userId', res.data.userId);

            if(!localStorage.getItem('I-THD-TK')&&!localStorage.getItem('I-THD-TK-SVED')){
              localStorage.setItem('I-THD-TK',true);
              let routeData=this.$router.resolve({ path:'/personal/personalData'})
              window.open(routeData.href, '_self');
            }
            else{
              if(localStorage.getItem('CRU-PATH')){
                this.$router.replace({path:localStorage.getItem('CRU-PATH')})
                localStorage.removeItem('CRU-PATH')
              }
              setTimeout(function () {
                  location.reload();
              }, 1200)
            }
        }
      } else {
        if (code && state) {
          localStorage.setItem('code', code)
          switch (state) {
            case 'game_bind_wx':
              localStorage.setItem('bind_type', 'game_bind_weixin')
              break
            case 'game_bind_qq':
              localStorage.setItem('bind_type', 'game_bind_qq')
              break
            case 'game_bind_weibo':
              localStorage.setItem('bind_type', 'game_bind_weibo')
              break
          }
          if(state){
            this.$router.push('/personal/accountSet')
          }
        }
      }
    }
     else {
      if (code && state) {
        localStorage.setItem('code', code)
        switch (state) {
          case 'game_bind_wx':
            localStorage.setItem('bind_type', 'game_bind_weixin')
            break
          case 'game_bind_qq':
            localStorage.setItem('bind_type', 'game_bind_qq')
            break
          case 'game_bind_weibo':
            localStorage.setItem('bind_type', 'game_bind_weibo')
            break
        }
        if(state)
        {
          this.$router.push('/personal/accountSet')
        }
      }
    }
  },
  methods: {
    toAdv(){
      // let routeData=this.$router.resolve({ path: this.sysAdvData.url})
      window.open(this.sysAdvData.url, '_blank');
    },
    handlRemoveAdv(e){
      this.showSysAdv=false;
      $('#app').removeClass('b-has-adv');
      // e.target.parentNode.remove();
    },
    toTop() {
      if(this.$route.name=='work'||this.$route.fullPath.indexOf('/work/')>-1){
        $('.right-con-box').prop('scrollTop',0);
      }else{
        $('body,html').animate({ scrollTop: 0 }, 300);
      }
    },
    checkIsInfoPage() {
      let rname=this.$route.name;
      let rpath=this.$route.path;
      this.ispublishMain=rname == 'publishGame'||rname == 'publishWork'||rname == 'publishArticle'||rname == 'publishManage'||rname == 'publishFans';
      this.isSingleInfo = rname == 'game' || rname == 'work' || rname == 'article' || rname == 'bountyscheme' || rname == 'img' || rpath.indexOf('personal') > 0;
    },
    handleHiddenRightBar() {
      localStorage.setItem('ALREADY-HIDDEN-RIGHT-BAR', this.isShowRightBar ? 0 : 1)
      this.isShowRightBar = !this.isShowRightBar
    },
    handleCloseHiddenRightBar() {
      localStorage.setItem('ALREADY-CLOSE-RIGHT-BAR', 0)
      this.isALREADYCLOSERIGHTBAR = false
    },
    changeSwitch() {
      $('#m-wins-new-login').hide()
      this.showNewLogin = false
      this.showLogin({ loginType: 0 })
    },
    getUrlKey(name, url) {
      return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(url) || [, ''])[1].replace(/\+/g, '%20')) || null
    },
    touchToClose: function (_isClose) {
      this.showLoginView = _isClose
    },
    showLogin(_data) {
      this.showLoginView = true
      this.$refs.gLogin.setShowType(_data.loginType)
    },
    closeLogin() {
      if(this.noLoginIsTak)
        this.$router.replace({path:'/'})
      this.showLoginView = false
    },
    loginSucc() {
      this.$refs.gHeader.refreshLoginSucc()

      this.$refs.gFooter.isLogin = true
    },
    loginOut() {
      this.isDarkTheme = false
      let href = location.href
      if (this.$route.name != 'Home') {
        this.$refs.gHeader.refreshLoginOut()
        //this.$refs.gFooter.isLogin = false;
        // this.$router.push({ path: '/' })
      } else {
        this.$refs.gHeader.refreshLoginOut()
        //this.$refs.gFooter.isLogin = false;
      }
    },
    changeBg() {
      let isDarkTheme = localStorage.getItem('CUR-THEME')
      if (isDarkTheme && isDarkTheme == 'DARK') {
        $('body').addClass('gameui-dark-themem')
        this.isDarkTheme = true
      } else {
        this.isDarkTheme = false
        $('body').removeClass('gameui-dark-themem')
      }
      let path = this.$route.path
      if (
        path.indexOf('/about') > -1 ||
        path.indexOf('/copyright') > -1 ||
        path.indexOf('/business') > -1 ||
        path.indexOf('/contact') > -1 ||
        path.indexOf('/addWorks') > -1 ||
        path.indexOf('/addArticle') > -1 ||
        path.indexOf('/addInspiration') > -1 ||
        path.indexOf('/addMaterial') > -1 ||
        path.indexOf('/editInfo') > -1 ||
        path.indexOf('/accountManager') > -1 ||
        path.indexOf('/myTeam') > -1 ||
        path.indexOf('/addTeam') > -1 ||
        path.indexOf('/messageCenter') > -1 ||
        path.indexOf('/agreement') > -1 ||
        path.indexOf('/membersRank') > -1 ||
        path.indexOf('/teamsRank') > -1 ||
        path.indexOf('/recruitHome') > -1 ||
        path.indexOf('/job') > -1 ||
        path.indexOf('/publishJob') > -1 ||
        path.indexOf('/publishEpiboly') > -1
      ) {
        this.hasBg = true
      } else {
        this.hasBg = false
      }

      if (path.indexOf('articleDetails') > -1 || path.indexOf('inspirationInfo') > -1) {
        this.isDetail = true
      } else {
        this.isDetail = false
      }

      let isac = localStorage.getItem('ALREADY-CLOSE-RIGHT-BAR')
      if (!isac || isac == 1) {
        this.isALREADYCLOSERIGHTBAR = true
      } else {
        this.isALREADYCLOSERIGHTBAR = false
      }

      let isshowRbar = localStorage.getItem('ALREADY-HIDDEN-RIGHT-BAR')
      if (!isshowRbar || isshowRbar == 1) {
        this.isShowRightBar = true
      } else {
        this.isShowRightBar = false
      }
    },
    touchUser: function () {
      this.hideView = true
    },
    touchToLoing: function (index) {
      this.$router.push({
        path: '/login',
        name: 'login',
        params: {
          index: index,
        },
      })
    }
  }
}
</script>
<style lang="less">
.pro-page-bar {
  position: fixed;
  // right: calc(((100% - 1920px) / 2 - 40px));
  right:35px;
  bottom: 35px;
  width: 34px;
  display: flex;
  flex-wrap: wrap;
  z-index: 106;

  .ques {
    width: 34px;
    height: 34px;
    background: url('./assets/pro/webbar/ques.svg') no-repeat;
    background-size: cover;
    transition: .1s all linear;

    &:hover {
      background: url('./assets/pro/webbar/ques_active.svg') no-repeat;
      background-size: cover;
    }
  }

  .top {
    margin-top: 5px;
    width: 34px;
    height: 34px;
    background: url('./assets/pro/webbar/top.svg') no-repeat;
    background-size: cover;
    transition: .1s all linear;

    &:hover {
      background: url('./assets/pro/webbar/top_active.svg') no-repeat;
      background-size: cover;
    }
  }

  a {
    position: relative;

    .cus-tooltip {
      position: absolute;
      background: #23232A;
      border-radius: 8px;
      text-align: center;
      line-height: 34px;
      height: 34px;
      display: inline-block;
      // width:54px;
      padding: 0px 14px;
      box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.3);
      right: 40px;
      top: 0;
      visibility: hidden;
      opacity: 0;
      z-index: -1;
      white-space: nowrap;
      transition: .2s all linear;
    }

    &:hover {
      .cus-tooltip {
        opacity: 1;
        z-index: 1;
        visibility:visible;
      }
    }
  }
}

.pro-footer {
  display: flex;
  color: #6E6D7A;
  font-size: 12px;
  justify-content: center;
  align-items: center;
  background: #181818;
  height: 40px;
  // margin-top:10px;
  position: relative;
  z-index: 105;

  .link {
    display: flex;
    margin-left: 21px;
    align-items: center;

    &:before {
      content: '';
      display: inline-block;
      height: 10px;
      width: 1px;
      background: #6E6D7A;
    }

    li {
      margin-left: 20px;

      a {
        color: #6E6D7A;
      }
    }
  }
}

.n-dialog-mask {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: saturate(180%) blur(16px);
  z-index: 106;
  cursor: default;
}

.n-login-modal {
  padding-top: 34px;
  padding-bottom: 41px;
  // width: 500px;
  left: calc((100% - 500px) / 2);
  text-align: center;

  .close-dialog-btn {
    width: 18px;
    height: 18px;
    position: absolute;
    right: 37px;
    top: 33px;
    background: url('./assets/pro/close-win.svg') no-repeat;
    background-size: cover;
  }
}

.n-dialog-container {
  background: #23232a;
  // border-radius: 30px;
  // box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.3);
  // position: fixed;
  z-index: 107;
  // height: 700px;
  top: 20%;

  .n-forget-m-tit {
    font-size: 26px;
    color: #fff;
    line-height: 37px;
  }

  .n-forget-m-sub-tit {
    font-size: 16px;
    color: #fff;
    margin-bottom: 42px;
    margin-top: 8px;

    .gt-login {
      color: #11CCB1;
      margin-left: 10px;
      display: inline-block;
    }
  }

  .join-tit {
    font-size: 12px;
    color: #969696;
    margin-top: 19px;
    margin-bottom: 26px;
    line-height: 17px;
  }

  .n-login-type {
    font-size: 18px;
    color: #969696;
    margin-bottom: 21px;

    span {
      display: inline-block;
      cursor: pointer;

      &:first-child {
        margin-right: 50px;
      }

      &.active {
        color: #fff;
        font-weight: 500;
        position: relative;

        &:after {
          transition: .1s all linear;
          content: '';
          height: 2px;
          width: 25px;
          background: #fff;
          bottom: -5px;
          position: absolute;
          border-radius: 2px;
          left: calc((100% - 25px) / 2);
          display: inline-block;
        }
      }
    }
  }

  .n-login-form {
    .field-item {
      margin-bottom: 20px;
      position: relative;
      width: 269px;
      margin-left: auto;
      margin-right: auto;

      input {
        height: 46px;
        border-radius: 10px;
        padding-left: 14px;
        background: #171719;
        width: 269px;
        color: #fff;
        font-size: 14px;
        border: none;
      }

      .get-code-btn {
        font-size: 14px;
        color: #fff;
        position: absolute;
        right: 14px;
        line-height: 46px;
      }
      .view-pwd{
        background:url('.../.././assets/pro/pwd_open.svg') no-repeat;
        background-position:center center;
        width:24px;
        height:24px;
        position:absolute;
        right:10px;
        top:10px;
        transition:background .1s ease;
        &.active{
          background:url('.../.././assets/pro/pwd_close.svg') no-repeat;
          background-position:center center;
        }
      }
      &.flex-item{
        display: flex;
        align-items: center;
      }
    }

    .field-forget-pwd-tip {
      text-align: right;
      font-size: 12px;
      color: #969696;
      width: 269px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 30px;
    }

    .field-login-split {
      font-size: 12px;
      color: #969696;
      margin-bottom: 20px;
    }

    .btn-box {
      line-height: 46px;
      width: 269px;
      margin-left: auto;
      margin-right: auto;
      border-radius: 23px;
      overflow: hidden;
      font-size: 16px;
      margin-bottom: 20px;

      a {
        display: inline-block;
        width: 100%;
        height: 100%;
        user-select: none;
        transition:.1s all linear;
      }

      &.field-login-btn {
        a {
          background: #11CCB1;
          color: #fff;
          &:hover{
            background: #0fab94;
          }
        }
      }

      &.field-other-wx-btn {
        a {
          background: #03C160;
          color: #fff;
          background-image: url('./assets/pro/icon_wx.svg');
          background-repeat: no-repeat;
          background-position: 19px center;
          &:hover{
            background-color: #038141;
          }
        }
      }

      &.field-other-qq-btn {
        a {
          background: #1A77F2;
          color: #fff;
          background-image: url('./assets/pro/icon_qq.svg');
          background-repeat: no-repeat;
          background-position: 19px center;
          &:hover{
            background-color: #074BA5;
          }
        }
      }

      &.field-other-wb-btn {
        a {
          background: #D42D2C;
          color: #fff;
          background-image: url('./assets/pro/icon_weibo.svg');
          background-repeat: no-repeat;
          background-position: 19px center;
          &:hover{
            background-color: #930C0C;
          }
        }
      }

      &.field-reset-btn {
        border: 1px solid red;

        a {
          background: #11CCB1;
          color: #fff;
        }
      }
    }
  }

  .n-login-tip {
    font-size: 12px;
    width: 240px;
    margin-left: auto;
    margin-right: auto;
    color: #969696;
    line-height: 17px;

    .user-xy {
      color: #fff;
      margin-left: 5px;
    }
  }
}


.bodyView {
  /* display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%; */
  // background: #111;
  // max-width: 1920px;
  margin: 0 auto;
  height: 100%;
  // position: relative;
}

.container {
  min-height: 600px;
}

.foot_tcv {
  width: 100%;
}

.has-bg {
  background: #f5f6fa !important;
}

.collapse-syscm-li {
  position: relative;

  .collapse-syscmt {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
    opacity: 1;
    border: none;

    i {
      background: url('assets/collapse-sys-cmt.png') no-repeat;
      background-position: center;
    }
  }

  .fr-tip-msg {
    position: absolute;
    top: 0px;
    background: #13cbb0;
    color: #fff;
    right: 60px;
    font-size: 16px;
    display: inline-block;
    line-height: 42px;
    border-radius: 8px;
    width: 214px;
    padding-left: 20px;

    &:before {
      position: absolute;
      content: '';
      height: 0;
      left: 99%;
      top: 8px;
      border-top: 13px solid transparent;
      border-left: 13px solid #13cbb0;
      border-bottom: 13px solid transparent;
    }

    .close-collapse-btn {
      float: right;
      margin-top: 13px;
      margin-right: 10px;
      cursor: pointer;

      &:hover {
        color: #eee;
      }
    }
  }
}
</style>
